<template>
  <a-card :title="_id ? '路由编辑' : '路由添加'">
    <a-form
      :model="formState"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
      :rules="rules"
      @finish="onFinish"
      autocomplete="off"
    >
      <a-form-item label="路由编号" v-if="_id">
        <a-input v-model:value.trim="_id" disabled />
      </a-form-item>
      <a-form-item label="路由名称" name="title">
        <a-input v-model:value.trim="formState.title" />
      </a-form-item>
      <a-form-item label="类型" name="type">
        <a-radio-group v-model:value="formState.type">
          <a-radio :value="0">内部跳转</a-radio>
          <a-radio :value="1">外部连接</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="是否菜单" v-if="!formState.type">
        <a-radio-group v-model:value="formState.menuType">
          <a-radio :value="0">导航</a-radio>
          <a-radio :value="1">菜单</a-radio>
        </a-radio-group>
      </a-form-item>

      <template v-if="!formState.menuType">
        <a-form-item label="关联菜单">
          <a-select v-model:value="formState.parentId">
            <a-select-option
              v-for="item in menuList"
              :key="item._id"
              :value="item._id"
              >{{ item.title }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="路由地址" name="path">
          <a-input v-model:value.trim="formState.path" />
        </a-form-item>
        <a-form-item label="component" name="component">
          <a-input v-model:value="formState.component" />
        </a-form-item>
      </template>
      <a-form-item label="ICON">
        <a-input v-model:value="formState.icon" />
      </a-form-item>
      <a-form-item label="meta-title">
        <a-input v-model:value="formState.meta.title" />
      </a-form-item>
      <a-form-item label="meta-keepAlive">
        <a-switch v-model:checked="formState.meta.keepAlive" />
      </a-form-item>
      <a-form-item label="meta-hidden">
        <a-switch v-model:checked="formState.meta.hidden" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" html-type="submit"
          >{{ _id ? "更新" : "添加" }}
        </a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>


<script setup>
import { onMounted, ref } from "vue";
import { message } from "ant-design-vue";
import {
  addRouter,
  getRouterDetail,
  editRouter,
  getRouterMenu,
} from "@/api/router";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const _id = ref(route.query?._id || null);
const menuList = ref([]);
const formState = ref({
  title: "",
  type: 0, // 内部连接
  path: "", // 路由地址
  icon: "",
  component: "",
  menuType: 0, // 0 导航 1 菜单
  meta: {
    title: "",
    keepAlive: false,
    hidden: false,
  },
});

const rules = {
  title: [
    {
      required: true,
      message: "请输入路由名称",
      trigger: "blur",
    },
  ],
  type: [
    {
      required: true,
      trigger: "blur",
    },
  ],
  path: [
    {
      required: !formState.value.menuType,
      message: "请输入路由地址",
      trigger: "blur",
    },
  ],
  component: [
    {
      required: !formState.value.menuType,
      message: "请输入组件地址",
      trigger: "blur",
    },
  ],
};

const onFinish = async (values) => {
  const { msg, success } = _id.value
    ? await editRouter({ ...formState.value, _id: _id.value })
    : await addRouter(formState.value);
  if (success) {
    message.success(msg);
    router.push("/router-manage");
  } else {
    message.error(msg);
  }
};
const getRouterMenuList = async () => {
  const { msg, data, success } = await getRouterMenu();
  if (success) {
    console.log(data);
    menuList.value = data;
  }
};

onMounted(async () => {
  console.log(route.query);
  getRouterMenuList();
  if (_id) {
    const { msg, data, success } = await getRouterDetail({
      _id: _id.value,
    });
    if (success) {
      console.log(data);
      formState.value = data;
    }
  }
});
</script>
